<!--  -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="状态">
                <el-select v-model="formInline.type" placeholder="请选择" @change="selectTypeHandle">
                    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="司机姓名">
                <el-input v-model="formInline.name" placeholder="请输入司机姓名"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
                <el-input v-model="formInline.car_name" placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="运单时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
        </CustomForm>

        <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '100%' }"></CustomDescriptions>
        <el-table :data="list" style="width: 100%" height="600" v-loading="tableLoading" border>
            <el-table-column prop="id" label="运单ID" width="120" align="center">
            </el-table-column>
            <el-table-column prop="company_name" label="公司名称" :show-overflow-tooltip="true" align="center">
            </el-table-column>
            <el-table-column prop="sj_name" label="司机姓名" width="80" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="cph" label="车牌号" width="100" align="center">
            </el-table-column>
            <el-table-column prop="ship_address" label="发货地" :show-overflow-tooltip="true" align="center">
            </el-table-column>
            <el-table-column prop="to_address" label="收货地" :show-overflow-tooltip="true" align="center">
            </el-table-column>
            <el-table-column prop="unit_price" label="运费单价" width="80" align="center">
            </el-table-column>
            <el-table-column prop="kg" label="发货重量" align="center">
                <template slot-scope="scope">
                    <span :style="{ color: (scope.row.kg ? '' : 'red') }">{{ scope.row.kg }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="unloading_weight" label="卸货重量" align="center">
                <template slot-scope="scope">
                    <span :style="{ color: (scope.row.unloading_weight ? '' : 'red') }">{{ scope.row.unloading_weight
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="运费" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '0'">待提货</span>
                    <span v-else-if="scope.row.status == '1'">拒绝</span>
                    <span v-else-if="scope.row.status == '2'">确认</span>
                    <span v-else-if="scope.row.status == '3'" style="color:blue">运输中</span>
                    <span v-else-if="scope.row.status == '4'" style="color:green">完成</span>
                    <span v-else-if="scope.row.status == '5'" style="color:#ff9900">待结算</span>
                    <span v-else-if="scope.row.status == '6'" style="color:green">结算</span>
                    <span v-else-if="scope.row.status == '7'">结算失败</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" v-if="[3, 4, 5, 6, 7].includes(scope.row.status)"
                        @click="traceId = scope.row.id; checkTrace = true">轨迹</el-button>
                    <el-button type="primary" size="mini" @click="returnHandle(scope.row.id)">回单</el-button>

                    <el-button type="primary" size="mini" v-if="[4].includes(scope.row.status)"
                        @click="checkWaybillHandle(scope.row)">核对运单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="查看回单" :visible.sync="dialogReceipts" width="60%" :before-close="returnHandleClose"
            :modal="true">
            <div class="imgbox3">
                <div class="block">
                    <div class="demonstration">发货单：</div>
                    <!-- <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                        :on-success="(res, file) => handleAvatarSuccess(res, file, 'fahuo')"
                        :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <img v-if="viewReceiptsImgs.pic" :src="viewReceiptsImgs.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->

                    <uploadImgPrev :textType="'fahuo'" @getImageList="getImageList" :imageList="[viewReceiptsImgs.pic]">
                    </uploadImgPrev>

                </div>

                <div class="block">
                    <div class="demonstration">收货单：</div>
                    <uploadImgPrev :textType="'shouhuo'" @getImageList="getImageList"
                        :imageList="[viewReceiptsImgs.shd]">
                    </uploadImgPrev>
                </div>

                <div class="block">
                    <div class="demonstration">卸货照片：</div>
                    <uploadImgPrev :textType="'xiehuo'" @getImageList="getImageList"
                        :imageList="[viewReceiptsImgs.xh_img]">
                    </uploadImgPrev>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogReceipts = false">取 消</el-button>
                <el-button type="primary" @click="updateViewReceiptHandle">保 存</el-button>
            </span>
        </el-dialog>



        <el-dialog class="carTrace" title="查看轨迹" top="5vh" :visible.sync="checkTrace" width="70%" :modal="true"
            :before-close="carTraceHandleClose">
            <CarTrace v-if="checkTrace" ref="carTrace" :id="traceId" />
        </el-dialog>

        <el-dialog title="核对运单" class="checkWaybill" :visible.sync="checkWaybillDialog" width="80%">
            <CheckWaybill v-if="checkWaybillDialog" :billDetail="billDetail" @refreshTable="refreshTable" />
        </el-dialog>


    </div>
</template>

<script>
import { getSubBillList, waybillDetails, viewReceipts, updateViewReceipts } from '@/api/waybill';
import CarTrace from "@/components/CarTrace/CarTrace.vue";
import uploadImgPrev from "@/components/uploadImgPrev/index.vue";
import CheckWaybill from "./components/checkWaybill.vue";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        CarTrace,
        CheckWaybill,
        uploadImgPrev
    },
    data() {
        //这里存放数据
        return {
            formInline: {
                type: -1,
                time: '',
                endTime: "",
                name: "",
                car_name: "",
                phone: "",
                page: 1,
                pageSize: 10
            },
            descriptionsData: [
                {
                    label: "总单数",
                    count: 0,
                    unit: "(单)"
                },
                {
                    label: "总金额",
                    count: 0,
                    unit: "(元)"
                },
                {
                    label: "总吨数",
                    count: 0,
                    unit: "(吨)"
                },
            ],
            options: [
                {
                    name: '全部',
                    value: -1
                },
                {
                    name: '待提货',
                    value: 1
                },
                {
                    name: '运输中',
                    value: 3
                },
                {
                    name: '已完成',
                    value: 4
                },
                {
                    name: '待结算',
                    value: 5
                },
                {
                    name: '已结算',
                    value: 6
                },
            ],
            list: [],//分运单列表
            pickerDateArr: "",
            tableLoading: false,
            total: 0,
            checkTrace: false,

            dialogReceipts: false,//回单dialog显示

            viewReceiptsImgs: {//回单的三张图片
                pic: "",
                shd: "",
                xh_img: "",
                id: ""
            },
            checkWaybillDialog: false,//核对运单
            billDetail: {},//核对运单数据

            traceId: '',
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        pickerDateArr: {
            handler(newV, oldV) {
                if (newV) {
                    this.formInline.time = newV[0]
                    this.formInline.endTime = newV[1]
                }
            }
        }
    },
    //方法集合
    methods: {
        refreshTable() {
            this.checkWaybillDialog = false;
            this.getSubBillList();
        },
        async getSubBillList() {
            this.tableLoading = true;
            let res = await getSubBillList(this.formInline);
            if (res.code == 200) {
                this.list = res.data;
                this.total = res.extra.total;
                this.descriptionsData[0].count = res.extra.total;
                this.descriptionsData[1].count = res.extra.total_price;
                this.descriptionsData[2].count = res.extra.weight;
            }
            this.tableLoading = false;
        },
        onSubmit() {
            this.getSubBillList();
        },
        resetTable() {
            this.formInline = {
                type: -1,
                time: '',
                endTime: "",
                name: "",
                car_name: "",
                phone: "",
                page: 1,
                pageSize: 10,
            };
            this.pickerDateArr = "";
            this.getSubBillList();
        },
        changeDatePicker() {//日期选择完的回调
            this.getSubBillList();
        },
        handleCurrentChange(page) {//改变page回调
            this.formInline.page = page;
            this.getSubBillList();
        },
        handleSizeChange(pageSize) {//改变pageSize
            this.formInline.pageSize = pageSize;
            this.getSubBillList();
        },
        selectTypeHandle() {//form表单中的选择类型的回调
            this.getSubBillList();
        },
        async returnHandle(id) {
            let res = await viewReceipts({ id });
            this.viewReceiptsImgs = res.data;
            this.viewReceiptsImgs.id = id;
            this.dialogReceipts = true;
        },
        returnHandleClose() {
            this.dialogReceipts = false;
        },

        getImageList(list, index) {
            console.log(list[0]);
            if (list[0].name == 'fahuo') {
                this.viewReceiptsImgs.pic = list[0].url
            } else if (list[0].name == 'shouhuo') {
                this.viewReceiptsImgs.shd = list[0].url;
            } else if (list[0].name == 'xiehuo') {
                this.viewReceiptsImgs.xh_img = list[0].url;
            }
        },
        async updateViewReceiptHandle() {
            let res = await updateViewReceipts(this.viewReceiptsImgs);
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogReceipts = false;
            }
        },
        async checkWaybillHandle(row) {
            let result = await waybillDetails({ id: row.id });
            if (result.code == 200) {
                this.billDetail = result.data;
                this.checkWaybillDialog = true;
            }
        },
        carTraceHandleClose() {//CarTrace组件关闭的回调,用地图组件的地方必须要写,不要然会造成内存泄露
            if (this.$refs.carTrace.traceMap) {
                this.$refs.carTrace.traceMarker.stopMove(); //先暂停轨迹动画然后再销毁 否则报错
                this.$refs.carTrace.traceMap.destroy();
            }
            this.checkTrace = false;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getSubBillList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-pagination {
    margin-top: 20px;
}

.carTrace {
    ::v-deep .el-dialog {
        height: 80vh;

        .el-dialog__body {
            height: calc(80vh - 55px);
            overflow: hidden;
        }
    }
}

.imgbox3 {
    display: flex;

    .block {
        display: flex;
        padding: 30px;
        width: 30%;
        height: 300px;
        overflow: hidden;
    }

    .demonstration {
        width: 40%;
    }
}
</style>